<template>
<div class="page">
    <div class="contact-us">
      <ul class="question-list" >
        <li v-for="(item,index)in dataList" :key='index'>
          <div class="tile-bg">
            <div class="title">{{index+1}}:{{item[index].question}}</div>
            <span class="arrow"></span>
          </div>
          <div class="section-list">
            <div class="section">
             {{item[index].answer}}
            </div>
          </div>
        </li>
      </ul>
    </div>
</div>
</template>
<script>
export default {
  name: 'Home',
  data(){
    return{
      dataList :[
        {
          question: '优课达学院服务流程？',
          answer:
            '加入优课达学院后，我们会在1个工作日内给你分配专属的班主任和助教，并且邀请你加入班级群中。班主任和助教将会全程陪伴你完成整个阶段的学习',
        },
        {
          question: '学不会怎么办？',
          answer:
            '你可以选择在群里提问、向助教提问、在问吧产品进行提问、直播答疑课中提问。请记住学习编程是需要多交流、多提问，这样能够学的更好',
        },
        {
          question: '学习时长？',
          answer:
            '根据我们的经验，即使学的慢3-4个月基本上就可以完成一个阶段的学习（我们见过有1个月学完一个阶段的同学），我们建议你每周分配三天去学习，每次学习1个小时，按照这个计划去执行成长会非常快速。当然我们的班主任也会对你进行各种促学，我们始终关注你的学习成果',
        },
        {
          question: '如何获取证书',
          answer:
            '当你完成一个阶段的课程学习后，可以向班主任申请证书认证，优课达会安排对你进行考核，考核通过后颁发等级证书',
        },
        {
          question: '无法学习怎么办',
          answer:
            '优课达产品目前只支持PC电脑学习，并且我们只保证 chrome 系列的浏览器可以运行，对于部分拥有 iPad 的同学也可以使用 iPad 浏览器进行学习。我们会加快产品进度，支持更多端的学习方式',
        },
      ]
    }
  },
  // methods:{

  // }
</script>
<style lang="scss" scoped>
.contact-us {
  background: #17191d;
  min-height: 100vh;
  padding: rem(20) rem(20) rem(20) rem(20);
  .question-list {
    margin-top: rem(20);
    margin-bottom: rem(30);
  }
  .course-item {
    margin-bottom: rem(10);
    font-size: rem(15);
    line-height: rem(21);
    color: #ffffff;
    text-align: left;
    &:last-child {
      margin-bottom: 0;
    }
    .tile-bg {
      height: rem(46);
      box-sizing: border-box;
      border-radius: rem(4);
      background: #32c5ff;
      position: relative;
      padding-left: rem(5);
      &:last-child {
        margin-bottom: 0;
      }
      .title {
        display: flex;
        align-items: center;
        height: 100%;
        padding-left: rem(10);
        background: #3d495c;
        border-radius: 0 rem(4) rem(4) 0;
      }
      .arrow {
        position: absolute;
        top: rem(15);
        right: rem(15);
        width: rem(16);
        height: rem(16);
        background: url(https://qgt-style.oss-cn-hangzhou.aliyuncs.com/img/sandwich/home_m/arrow.png)
          no-repeat center;
        background-size: contain;
      }
    }
    .section-list {
      display: none;
      width: 100%;
      background: #2f394b;
      border-radius: 0 0 rem(4) rem(4);
      animation: 2s;
      .section {
        padding: rem(19) rem(20) rem(15);
        text-align: left;
        margin-top: rem(-4);
        background: #2f394b;
        border-radius: 0 0 rem(4) rem(4);
      }
    }
    .section-list-block {
      display: block;
    }
  }
}

</style>
